import { getColor } from '@/utils';

const Progress = props => {
  const { percent = 0, color = '#0BFEA5' } = props;

  return <div style={{
    height: '100%',
    width: '100%',
    backgroundColor: 'transparent',
    border: `1rem solid ${color}`,
  }}>
    <div style={{
      height: '100%',
      width: `${percent}%`,
      background: `linear-gradient(to right, ${getColor(color, 0.2)}, ${color})`
    }}/>
  </div>
}

export default Progress;
